<template>
  <el-dialog
      v-model="dialogFormVisible"
      title="修改订单"
      top="30px"
      :close-on-click-modal="false">
    <div class="info-body">
      <el-form
          ref="ruleFormRef"
          :model="form"
          :rules="addFormRules"
          label-width="120px"
          class="form-info"
      >
        <el-form-item label="订单编号" prop="no">
          <el-input v-model="form.no" readonly/>
        </el-form-item>
        <el-form-item label="送水工编号" prop="workId">
          <el-input v-model="form.workId" />
        </el-form-item>
        <el-form-item label="送水日期">
          <el-input v-model="form.date" type="date"/>
        </el-form-item>
        <el-form-item label="客户编号" prop="customerId" >
          <el-input v-model="form.customerId"/>
        </el-form-item>
        <el-form-item label="送水数量" prop="num">
          <el-input v-model="form.num"  @change="handleChange" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> 取消</el-button>
        <el-button type="primary" @click="dialogAddConfirm">确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {ElMessage} from "element-plus";

export default {
  name: "WhdModify",
  data() {
    return {
      dialogFormVisible: false,
      form: {
        no: 0,
        date: '',
        workId: '',
        customerId: '',
        num: '',
      },
    }
  },
  components: {

  },
  methods:{
    handleChange(){

    },
    dialogShow(no){
      this.dialogFormVisible=true;
      this.no=no;
      this.OrderModify();
    },
    //显示信息
    OrderModify(){
      var that=this;
      this.axios
          .get("/Order/selectByNo/"+this.no)
          .then(function (response) {
            that.form=response;
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    dialogAddConfirm() {
      let that = this;//改变this指向
      this.$refs.ruleFormRef.validate(valid => {
        if (valid) {
          console.log(this.form)
          this.axios.post("/Order/modify", this.form).then(res => {
            console.log(res + "修改成功")
            this.dialogFormVisible = false;
            that.$emit("updateData");
            that.$refs['ruleFormRef'].resetFields();
          }).catch(function (error) {
            console.log(error);
          });
        } else {
          ElMessage.error("请检查输入的信息！");
        }
      })
    },
    clear() {
      this.$refs['ruleFormRef'].resetFields();
    }

  }
}

</script>

<style scoped>
.info-body{
  display: flex;
  justify-content: space-around;
}
.form-info{
  display: flex;
  flex-direction: column;
}
</style>